<template>
  <div class="container">
    <el-row :gutter="60">
      <el-col :span="6">
        <ul class="flex-ul">
          <li class="left-img"><img src="./img/year.png" alt="" /></li>
          <li class="right-tips">
            <p>总注册用户</p>
            <p class="right-tips-num">{{ riseInfo.userCount }}</p>
          </li>
        </ul>
      </el-col>
      <el-col :span="6">
        <ul class="flex-ul">
          <li class="left-img"><img src="./img/month.png" alt="" /></li>
          <li class="right-tips">
            <p>月新增注册用户</p>
            <p class="right-tips-num">{{ riseInfo.userMonthCount }}</p>
          </li>
        </ul>
      </el-col>
      <el-col :span="6">
        <ul class="flex-ul">
          <li class="left-img"><img src="./img/week.png" alt="" /></li>
          <li class="right-tips">
            <p>周新增注册用户</p>
            <p class="right-tips-num">{{ riseInfo.userWeekCount }}</p>
          </li>
        </ul>
      </el-col>
      <el-col :span="6">
        <ul class="flex-ul">
          <li class="left-img"><img src="./img/day.png" alt="" /></li>
          <li class="right-tips">
            <p>日新增注册用户</p>
            <p class="right-tips-num">{{ riseInfo.userDayCount }}</p>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <echart-user :randomRiseInfo="randomRiseInfo" />
      </el-col>
      <el-col :span="8">
        <echart-perfor />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16" class="border-left">
        <el-table size="medium" border :data="tableData" style="width: 100%;">
          <el-table-column prop="id" show-overflow-tooltip label="ID" />
          <el-table-column prop="userId" show-overflow-tooltip label="用户ID" />
          <el-table-column
            prop="username"
            show-overflow-tooltip
            label="用户名"
          />
          <el-table-column
            prop="birthTime"
            show-overflow-tooltip
            label="注册日期"
          />
          <el-table-column label="标签" width="180px">
            <template slot-scope="scope">
              <el-tag type="warning" size="medium">{{ scope.row.city }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        />
      </el-col>
      <el-col :span="8">
        <echart-from />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EchartUser from "./echart-user.vue";
import EchartFrom from "./echart-from.vue";
import EchartPerfor from "./echart-perfor.vue";
import {
  getUserRiseInfo,
  getUserRandomRiseInfo,
  getUserList
} from "@/api/user.js";

export default {
  components: { EchartUser, EchartFrom, EchartPerfor },
  data() {
    return {
      loading: true,
      tableData: [],
      pageIndex: 0,
      total: 0,
      riseInfo: {},
      randomRiseInfo: {}
    };
  },
  created() {
    this.getUserRiseInfo();
    this.getUserRandomRiseInfo();
    this.getUserList();
  },
  methods: {
    currentChange(val) {
      this.pageIndex = val - 1;
      this.getUserList();
    },
    getUserList() {
      getUserList({
        pageIndex: this.pageIndex
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.pageData || [];
          this.total = Number(res.data.total);
        }
      });
    },
    getUserRandomRiseInfo() {
      getUserRandomRiseInfo().then(res => {
        if (res.code == 0) {
          this.randomRiseInfo = res.data || {};
        }
      });
    },
    getUserRiseInfo() {
      getUserRiseInfo().then(res => {
        if (res.code == 0) {
          this.riseInfo = res.data || {};
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding-bottom: 48px;
  .flex-ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    padding: 20px 28px;
    background: #fff;
    border-radius: 3px;
    .left-img {
      flex: 1;
      img {
        width: 48px;
        height: 48px;
      }
    }
    .right-tips {
      flex: 2;
      text-align: right;
      font-size: 16px;
      color: #777;
      &-num {
        margin-top: 12px;
        color: #333;
        font-weight: bold;
      }
    }
  }
  .border-left {
    height: 600px;
    border-radius: 3px;
    background: #fff;
    padding-top: 20px;
    .pagination {
      padding: 10px 0;
      text-align: right;
    }
  }
}
</style>
